<template>
  <div class="card card-flush" :class="className">
    <!--begin::Header-->
    <div class="card-header pt-5">
      <!--begin::Title-->
      <div class="card-title d-flex flex-column">
        <!--begin::Info-->
        <div class="d-flex align-items-center">
          <span class="fs-2hx fw-bold lh-1 ls-n2 me-2 text-gray-900">{{ totalEngineers }}</span>
          <span class="badge badge-light-success fs-base"> 总技术员工数 </span>
        </div>
        <!--end::Info-->

        <!--begin::Subtitle-->
        <span class="fw-semibold fs-6 pt-1 text-gray-500">统计中的技术员工数</span>
        <!--end::Subtitle-->
      </div>
      <!--end::Title-->
    </div>
    <!--end::Header-->

    <!--begin::Card body-->
    <div class="card-body d-flex align-items-center flex-wrap pb-4 pt-2">
      <!--begin::Chart-->
      <div class="d-flex flex-center me-5 pt-2">
        <div
          id="kt_card_widget_17_chart"
          :style="{
            minWidth: `${chartSize}px`,
            minHeight: `${chartSize}px`,
          }"
          :data-kt-size="chartSize"
          :data-kt-line="11"
        ></div>
      </div>
      <!--end::Chart-->

      <!--begin::Labels-->
      <div class="d-flex flex-column content-justify-center flex-row-fluid">
        <!--begin::Label-->
        <div class="d-flex fw-semibold align-items-center">
          <div class="bullet w-8px h-3px rounded-2 bg-success me-3"></div>
          <div class="flex-grow-1 me-4 text-gray-500">后端</div>
          <div class="fw-bolder text-xxl-end text-gray-700">{{ backendEngineers }}</div>
        </div>
        <!--end::Label-->

        <!--begin::Label-->
        <div class="d-flex fw-semibold align-items-center my-3">
          <div class="bullet w-8px h-3px rounded-2 bg-primary me-3"></div>
          <div class="flex-grow-1 me-4 text-gray-500">前端</div>
          <div class="fw-bolder text-xxl-end text-gray-700">{{ frontendEngineers }}</div>
        </div>
        <!--end::Label-->
      </div>
      <!--end::Labels-->
    </div>
    <!--end::Card body-->
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'EngineerStatsWidget',
  props: {
    className: { type: String, default: '' },
    chartSize: { type: Number, default: 70 },
    totalEngineers: { type: Number, default: 0 },
    backendEngineers: { type: Number, default: 0 },
    frontendEngineers: { type: Number, default: 0 },
  },
});
</script>
